<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS_浮动</title>
    <link rel="stylesheet" href="style.css">
    <style>
        div ul{float: left}
        div ul li{float: left;margin: 0 10px 10px 0;cursor: pointer;
            border-right: 1px solid red;
            padding:0 20px 0 0 ;
        }
        div ul li:last-child{
            border-right:none;

        }
        .div{width: 200px;height: 200px}
        /*浮动后，元素会脱离文档流，它原来占有的空间，就由后继元素来补充
            浮动后，它会拥有行集元素的特性

            浮动在右侧时。定位基点就编程了右上角，右顶点是浏览器右边栏的位置。
            清除浮动带来的影响，可用清除浮动来实现。clear:left right both
            clear both:清除左右浮动height值最大的那个元素
        */
        /*#div1{background: red;float: left;height: 400px}*/
        #div2{background: green;float:right;height: 300px;}
        #div3{background: blue;}
        #div{border:1px solid black; }
        #div5 div{width: 100px;height: 100px;float: left}
        #div5 div:nth-child(1){background-color: red;position: relative;}
        #div5 div:nth-child(2){background-color: black;}
        #div5 div:nth-child(3){background-color: blue;margin-top: 100px;margin-left: -100px}
        #div5 div:nth-child(4){background-color: green;margin-top: 100px;margin-left: -200px}
    </style>
</head>
<body>
<div id="div5">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div>
    <ul>
        <li>主页</li>
        <li>收藏</li>
        <li>商品</li>
        <li>介绍</li>
        <li>联系我们</li>
    </ul>
</div><br>
<hr width="100%">
    <div id="div1" class="div">div1</div>
    <div id="div2" class="div">div2</div>
    <div class="clear"></div>
    <div id="div3" class="div">div3</div>
</body>
</html>